<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="ch" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<div th:fragment="comments(id)">
    <div class="container">
        <div class="gt-container" id="gitTalk-container"></div>
    </div>
    <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js" async></script>
    <script type="text/javascript" th:inline="javascript">
        (function () {
            function initComments() {
                if (typeof(Gitalk) == 'undefined') {
                    setTimeout(initComments, 20);
                    return;
                }
                var link = document.createElement("link");
                link.rel="stylesheet";
                link.href="https://unpkg.com/gitalk/dist/gitalk.css";
                document.body.appendChild(link);
                var giTalkAdmin = [[${giTalk.admin}]];
                var giTalk = new Gitalk({
                    clientID: [[${giTalk.clientId}]],
                    clientSecret: [[${giTalk.secret}]],
                    repo: [[${giTalk.repo}]],
                    owner: [[${giTalk.owner}]],
                    admin: [giTalkAdmin],
                    labels: ['gitment'],
                    id: [[${id}]]+''
                });
                giTalk.render('gitTalk-container');
            }

            initComments();
        })();
    </script>
</div>

<nav th:fragment="page" th:if="${articles != null and articles.getTotalPages() > 0}" aria-label="Page navigation">
    <ul class="pagination justify-content-center"
        th:with="p=${articles},
        current=${p.getNumber()},
        start=${ p.getNumber() - 3 },
        start=${start < 0 ? 0 : start},
        end=${ p.getNumber() + 3 },
        end=${ end >= p.getTotalPages() ? p.getTotalPages() - 1 : end},
        end=${ end < 0 ? 0 : end}">
        <li th:class='${ "page-item " + (p.isFirst()?"disabled":"")}'>
            <a class="page-link" th:href="${#httpServletRequest.getContextPath() + '?page='+(current-1)  }">&larrtl;</a>
        </li>
        <li th:each="i:${#numbers.sequence(start,end)}" th:class='${"page-item " + (current==i?"active disabled":"") }'>
            <a class="page-link" th:href="${#httpServletRequest.getContextPath() + '?page='+(i)  }"
               th:text="${i + 1}"></a>
        </li>
        <li th:class='${ "page-item " + (p.isLast()?"disabled":"")}'>
            <a class="page-link" th:href="${#httpServletRequest.getContextPath() + '?page='+(current+1)  }">&rarrtl;</a>
        </li>
    </ul>
</nav>

<footer th:fragment="footer" class="container-fluid bg-dark footer" style="margin-top:0.7rem">
    <div class="container">
        <div class="row text-light">
            <div class="col-sm-12 text-center" style="padding:2rem;" th:utext="${pageInfo.footer}">

            </div>
        </div>
    </div>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css">
</footer>